<template>
  <div id="choose">
    <ul class="banners">
      <li
        v-for="(item, index) in banners"
        :key="index"
        :class="{disabled: !item.active}">
        <router-link :to="item.link" tag="a">
          <h4 v-if="item.aboutCar">汽车-{{ item.title }}</h4>
          <h4 v-if="!item.aboutCar">{{ item.title }}</h4>
          <img src="../../assets/images/choose/one.png" alt="" v-if="index === 0">
          <img src="../../assets/images/choose/two.png" alt="" v-else-if="index === 1">
          <img src="../../assets/images/choose/three.png" alt="" v-else-if="index === 2">
          <img src="../../assets/images/choose/four.png" alt="" v-else>
          <article>
            <h6 v-text="item.title"></h6>
            <p>
              <span
                v-if="item.active"
                v-for="(subItem, subIndex) in item.subtitle"
                :key="subIndex">{{ subItem }}|<br v-if="subIndex % 2 !== 0"></span>
              <span v-if="!item.active">{{ item.subtitle[0] }}</span>
            </p>
          </article>
        </router-link>

        <!-- 遮罩层 -->
        <div class="mask"></div>
      </li>
    </ul>

    <!-- 底部导航栏 -->
    <comp-footer></comp-footer>
  </div>
</template>

<script>
  import CompFooter from '../comp/comp-footer.vue';
  export default {
    name: 'choose',
    components: {
      CompFooter
    },
    data() {
      return {
        banners: [
          {
            title: '新保/转保咨询',
            subtitle: [
              '交强险',
              '第三者保险',
              '车损险',
              '多种套餐优惠搭配'
            ],
            link: '/licence-query',
            aboutCar: true,
            active: true
          },
          {
            title: '续保咨询',
            subtitle: [
              '续费咨询',
              '套餐优惠'
            ],
            link: '',
            aboutCar: true,
            active: false
          },
          {
            title: '人寿保险',
            subtitle: [
              '敬请期待...'
            ],
            link: 'javascript://',
            aboutCar: false,
            active: false
          },
          {
            title: '财产保险',
            subtitle: [
              '敬请期待...'
            ],
            link: 'javascript://',
            aboutCar: false,
            active: false
          }
        ],
      }
    }
  }
</script>

<style scoped lang="scss">

  @import "../../assets/style/public";

  #choose {
    padding-bottom: $comp-footer-height;

    $banner-height: 11rem;

    >.banners {
      >li {
        position: relative;
        height: $banner-height;
        margin-top: 2rem;

        >a {
          display: block;
          height: $size-as-parent;
          position: relative;

          >h4 {
            position: absolute;
            top: -1.2rem;
            left: 0;
            padding: 0 1rem;
            height: 2.4rem;
            line-height: 2.4rem;
            text-align: center;
            color: $white;
            font-size: 1.4rem;
            border-radius: 0 1.2rem 1.2rem 0;

            /* 防止被遮罩层遮盖 */

            z-index: $just-z-index;
          }

          >img {
            width: $size-as-parent;
            height: $size-as-parent;
          }

          >article {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 1.5rem;
            width: 14.2rem;
            height: 8rem;
            padding-left: 1.2rem;
            border-radius: 4rem 0 0 4rem;
            background: rgba(255, 255, 255, .7);

            >h6 {
              font-size: 1.4rem;
              color: #333;
              margin-bottom:.3rem;
            }

            >p {
              font-size: 1rem;
              color: #666;
            }
          }
        }

        &:nth-of-type(1) h4 {
          background: linear-gradient(to right, #0dc3e3, #476ae5);
        }
        &:nth-of-type(2) h4 {
          background: linear-gradient(to right, #fe7270, #ed1513);
        }

        &.disabled {
          h4 {
            background: linear-gradient(to right, #bbb, #999);
          }

          >.mask {
            position: absolute;
            width: $size-as-parent;
            height: $size-as-parent;
            left: 0;
            top: 0;
            background: rgba(153, 153, 153, .6);
          }
        }
      }
    }
  }
</style>
